<template>
  <div class="core-card">
    <div class="card-title">开启 OpenHarmony 之旅吧！</div>
    <div class="card-summary">
      OpenHarmony是由开放原子开源基金会（OpenAtom
      Foundation）孵化及运营的开源项目,<br />
      目标是面向全场景、全连接、全智能时代、基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展
    </div>
    <div class="card-wrapper">
      <a target="_blank"
         :href="cardItem.href"
         v-for="(cardItem, cardIndex) in cardData"
         :key="cardIndex"
         class="card-item">
        <div class="card-item-img">
          <img :src="cardItem.imgSrc"
               alt="" />
        </div>
        <div class="card-item-title">{{ cardItem.title }}</div>
        <div class="card-item-summary">{{ cardItem.summary }}</div>
        <div class="card-item-more">
          <div class="more-text">了解详情</div>
          <div class="more-btn"></div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "CoreCard",
  data () {
    return {
      cardData: [
        {
          imgSrc: require("@/assets/images/core-card-item1.png"),
          title: "下载",
          summary:
            "开启OpenHarmony开发之旅",
          href: "https://www.openharmony.cn/download/",
        },
        {
          imgSrc: require("@/assets/images/core-card-item2.png"),
          title: "体验",
          summary: "体会OpenHarmony开发乐趣",
          href: "http://139.159.252.23:9067/mainPlay/content/mainText/allFeatures",
        },
        {
          imgSrc: require("@/assets/images/core-card-item3.png"),
          title: "查阅",
          summary:
            "获取OpenHarmony开发指引",
          href: "https://www.openharmony.cn/documents/",
        },
        {
          imgSrc: require("@/assets/images/core-card-item4.png"),
          title: "贡献",
          summary: "共建OpenHarmony开源社区",
          href: "https://www.openharmony.cn/community/contribution/",
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@media screen and (min-width: 1032px) {
  .base {
    width: 1032px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .core-card {
    .base;
    flex-direction: column;
    margin: 88px auto 112px;
    .card-title {
      font-size: 40px;
      line-height: 40px;
      font-family: HarmonyOS_Sans_SC_Medium;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }
    .card-summary {
      font-size: 16px;
      font-family: HarmonyOS_Sans_SC_Light;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      margin-bottom: 48px;
    }
    .card-wrapper {
      .base;
      justify-content: space-between;
      position: relative;
      .card-item {
        position: relative;
        width: 23%;
        background: #fff;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 16px;
        &:hover {
          left: -2px;
          top: -2px;
          box-shadow: 0px 12px 24px 0px rgba(0, 166, 249, 0.12);
          border-radius: 8px;
          border: 1px solid #00a6f9;
          .card-item-more {
            font-weight: 500;
            text-decoration: none;
            color: #00a6f9;
            .more-btn {
              background: url("../../assets/images/btn-more-hover.png")
                no-repeat;
              background-size: contain;
            }
          }
        }
        .card-item-img {
          width: 160px;
          height: 160px;
          background: #ffffff;
          margin-top: 9px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .card-item-title {
          height: 28px;
          line-height: 28px;
          font-size: 20px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: rgba(0, 0, 0, 0.9);
          margin: 8px 0;
        }
        .card-item-summary {
          width: 100%;
          height: 60px;
          box-sizing: border-box;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC_Light;
          color: rgba(0, 0, 0, 0.9);
          line-height: 20px;
          padding: 0 16px;
          margin-bottom: 16px;
          word-break: normal;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-box-pack: center;
          -webkit-box-align: center;
          -webkit-line-clamp: 3;
        }
        .card-item-more {
          height: 23px;
          line-height: 23px;
          font-size: 16px;
          font-family: HarmonyOS_Sans_SC_Light;
          text-decoration: none;
          color: rgba(0, 0, 0, 0.45);
          margin-top: 24px 0 16px 0;
          display: flex;
          align-items: center;
          .more-btn {
            width: 23px;
            height: 18px;
            margin-left: 7px;
            background: url("../../assets/images/btn-more.png") no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1032px) {
  .base {
    width: 768px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .core-card {
    .base;
    flex-direction: column;
    margin: 81px auto 112px;
    .card-title {
      line-height: 40px;
      font-size: 40px;
      font-family: HarmonyOS_Sans_SC_Medium;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }
    .card-summary {
      font-size: 16px;
      font-family: HarmonyOS_Sans_SC_Light;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      margin-bottom: 48px;
    }
    .card-wrapper {
      .base;
      justify-content: space-between;
      position: relative;
      .card-item {
        position: relative;
        width: 23%;
        background: #fff;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 16px;
        &:hover {
          left: -2px;
          top: -2px;
          box-shadow: 0px 12px 24px 0px rgba(0, 166, 249, 0.12);
          border-radius: 8px;
          border: 1px solid #00a6f9;
          .card-item-more {
            font-weight: 500;
            text-decoration: none;
            color: #00a6f9;
            .more-btn {
              background: url("../../assets/images/btn-more-hover.png")
                no-repeat;
              background-size: contain;
            }
          }
        }
        .card-item-img {
          width: 70%;
          background: #ffffff;
          margin-top: 9px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .card-item-title {
          height: 28px;
          font-size: 20px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: rgba(0, 0, 0, 0.9);
          line-height: 28px;
          margin: 8px 0;
        }
        .card-item-summary {
          width: 100%;
          height: 60px;
          box-sizing: border-box;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC_Light;
          color: rgba(0, 0, 0, 0.9);
          line-height: 20px;
          padding: 0 16px;
          word-break: normal;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-box-pack: center;
          -webkit-box-align: center;
          -webkit-line-clamp: 3;
        }
        .card-item-more {
          height: 22px;
          font-size: 16px;
          font-family: HarmonyOS_Sans_SC_Light;
          text-decoration: none;
          color: rgba(0, 0, 0, 0.45);
          line-height: 22px;
          margin-top: 24px;
          display: flex;
          align-items: center;
          .more-btn {
            width: 23px;
            height: 18px;
            margin-left: 7px;
            background: url("../../assets/images/btn-more.png") no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .base {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .core-card {
    .base;
    flex-direction: column;
    margin: 40px auto 32px;
    padding: 0 12px;
    .card-title {
      line-height: 28px;
      font-size: 20px;
      font-family: HarmonyOS_Sans_SC_Medium;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }
    .card-summary {
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC_Light;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      margin-bottom: 48px;
      word-wrap: break-word;
      word-break: break-all;
    }
    .card-wrapper {
      .base;
      justify-content: space-between;
      flex-wrap: wrap;
      .card-item {
        position: relative;
        width: 48%;
        margin-bottom: 24px;
        padding-bottom: 16px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        .card-item-img {
          width: 70%;
          max-width: 160px;
          background: #ffffff;
          margin-top: 9px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .card-item-title {
          height: 28px;
          font-size: 20px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: rgba(0, 0, 0, 0.9);
          line-height: 28px;
          margin: 8px 0;
        }
        .card-item-summary {
          width: 100%;
          height: 40px;
          box-sizing: border-box;
          position: relative;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC_Light;
          color: rgba(0, 0, 0, 0.9);
          line-height: 20px;
          padding: 0 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-box-pack: center;
          -webkit-box-align: center;
          -webkit-line-clamp: 2;
        }
        .card-item-more {
          height: 22px;
          font-size: 16px;
          font-family: HarmonyOS_Sans_SC_Light;
          text-decoration: none;
          color: rgba(0, 0, 0, 0.45);
          line-height: 22px;
          margin-top: 24px;
          display: flex;
          align-items: center;
          .more-btn {
            width: 23px;
            height: 18px;
            margin-left: 7px;
            background: url("../../assets/images/btn-more.png") no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}
</style>
